<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script src="d3.js"></script>
    <script>
        const svg = d3.select('body').append('svg');
        svg.attr('width',800);
        svg.attr('height',500);
        svg.style('border','2px solid #ccc');
        
        // 示例连接数据
        var data = [
            {source: {x: 50, y: 50}, target: {x: 200, y: 200}},
            {source: {x: 100, y: 150}, target: {x: 300, y: 100}}
        ];

        // 创建 link 生成器
        var linkGenerator = d3.link(d3.curveLinear)
        .x(d=>d.x) // x 坐标
        .y(d=>d.y); // y 坐标


        // 绘制连接线
        svg.selectAll("path")
        .data(data)
        .join('path')
        .attr("d", linkGenerator)
        .attr("fill", "none")
        .attr("stroke", "steelblue");
    </script>
</body>
</html>